<template>
    <div class="common__color-F0F0F0 ">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">消息通知</div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
            <div class="common__header--rightfont" slot="right">全部已读</div>
        </x-header>

        <checker class="message__checker" default-item-class="common__itemmessage" selected-item-class="common__item-selectedmessage common__bacolor--DefaultTheme">
            <checker-item class="grid-center" :value="item" v-for="(item, index) in items1" :key="index">{{item.value}}</checker-item>

        </checker>

        <card class="message__card">
            <img slot="header" src="http://placeholder.qiniudn.com/640x300" class="message__card--img">
            <div slot="content" class="card-padding">
                <p style="color:#999;font-size:12px;">Posted on January 21, 2015</p>
                <p style="font-size:14px;line-height:1.2;">Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit..</p>
            </div>
        </card>
        <card class="message__card">
            <img slot="header" src="http://placeholder.qiniudn.com/640x300" class="message__card--img">
            <div slot="content" class="card-padding">
                <p style="color:#999;font-size:12px;">Posted on January 21, 2015</p>
                <p style="font-size:14px;line-height:1.2;">Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit..</p>
            </div>
        </card>
    </div>
</template>
<script>
import { XHeader, Card, XButton, Box, Badge, GroupTitle, Group, Flexbox, FlexboxItem, Divider, Checker, CheckerItem } from 'vux';
import { mapState, mapActions } from "vuex";
export default {
    components: { Card, Badge, XButton, Box, GroupTitle, Group, Flexbox, FlexboxItem, Divider, XHeader, Checker, CheckerItem },
    computed: mapState({
        isWeChar: "isWeChar"
    }),
    data() {
        return {
            items1: [{
                key: '1',
                value: '全部'
            }, {
                key: '2',
                value: '未读'
            }, {
                key: '3',
                value: '已读'
            }, {
                key: '4',
                value: '活动'
            }, {
                key: '5',
                value: '待办'
            }, {
                key: '6',
                value: '其他消息'
            }],
        }
    },
    methods: {
        goBack() {
            this.$common.goBack(this);
        }
    },
    mounted() {
        document.title = "消息通知";
        let _this = this;
        this.$init.subPageInit(this);
    },
}
</script>


<style>
.message__checker {
  background-color: #fff;
  padding: 7px 4%;
}

.message__card {
  margin: 5px 4%;
  padding: 10px 10px;
}

.message__card--img {
  width: 100%;
  display: block;
  /* margin: 10px 10px 10px 10px; */
}
</style>



